<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-04-03 16:54:00
 * @LastEditors: voanit
 * @LastEditTime: 2022-04-04 11:03:38
-->
<template>
  <div>
    ==={{ pid }}
    <el-form
      :rules="rules"
      :model="form"
      ref="diaForm"
      style="padding: 20px 50px"
    >
      <el-form-item label="部门名称" :label-width="formLabelWidth" prop="name">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="部门编码" :label-width="formLabelWidth" prop="code">
        <el-input v-model="form.code" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="部门负责人"
        :label-width="formLabelWidth"
        prop="manager"
      >
        <el-select
          style="width: 100%"
          v-model="form.manager"
          placeholder="请选择活动区域"
        >
          <el-option
            v-for="opt in managerList"
            :key="opt.id"
            :label="opt.username"
            :value="opt.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="部门介绍"
        :label-width="formLabelWidth"
        prop="introduce"
      >
        <el-input type="textarea" v-model="form.introduce"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitHandle">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { addDepartments, updateDepartments } from "@/api/departments";
import { getEmployeeSimple } from "@/api/employees";
export default {
  name: "",
  props: {
    pid: {
      type: [String, Number],
      default: "",
    },
    dialogFormVisible: {
      type: Boolean,
    },
    isEdit: {
      type: Boolean,
    },
    row: {
      type: Object,
      default: () => {}, //复杂数据类型需要使用函数返回
    },
  },
  watch: {
    // isEdit(newVal, oldVal) {
    //   console.log(111);
    //   if (newVal) {
    //     //  2-4-2 子组件：根据isEdit===true=>将传过来的数据赋值给form表单对象
    //     this.form = this.row;
    //   }
    // },
    isEdit: {
      handler(newVal) {
        console.log(11111);
        if (newVal) {
          //  2-4-2 子组件：根据isEdit===true=>将传过来的数据赋值给form表单对象
          /* 深拷贝 */
          this.form = JSON.parse(JSON.stringify(this.row)); //id====当前点击行的id
        }
      },
      immediate: true, // 进来就立即执行
      // deep: true, //深度监听
    },
  },
  // destroyed() {
  //   console.log("destroyed", 222);
  // },
  data() {
    return {
      form: {
        code: "",
        introduce: "",
        manager: "",
        name: "",
        pid: "",
      },
      managerList: [],

      formLabelWidth: "120px",
      rules: {
        name: [
          { required: true, message: "请输入部门名称", trigger: "blur" },
          { min: 1, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入部门编码", trigger: "blur" },
          { min: 1, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        manager: [
          { required: true, message: "请输入部门负责人", trigger: "change" },
          {
            min: 1,
            max: 55,
            message: "长度在 1 到 15 个字符",
            trigger: "change",
          },
        ],
        introduce: [
          { required: true, message: "请输入部门介绍", trigger: "blur" },
          { min: 1, max: 25, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    /* 获取部门负责人 */
    this.getManager();
  },
  computed: {},
  methods: {
    /* 关闭对话框 */
    cancel() {
      // this.dialogFormVisible = false;
      this.$emit("update:dialogFormVisible", false);
      // /* 子向父传值 */
      // this.$emit("handleDia");
      this.resetForm();
    },
    resetForm() {
      /* 表单重置 */
      this.$refs["diaForm"].resetFields();
      // this.form = {
      //   code: "",
      //   introduce: "",
      //   manager: "",
      //   name: "",
      //   pid: "",
      // };
    },
    async getManager() {
      const { data } = await getEmployeeSimple();
      // console.log(res, 45);
      this.managerList = data;
    },
    /* 点击对话框中的确认按钮 */
    submitHandle() {
      // 8-0 兜底校验
      this.$refs.diaForm.validate(async (valid) => {
        if (valid) {
          // // 校验成功 8-2 调用api接口函数
          // this.form.pid = this.pid; // 传过来pid
          this.isEdit ? this.doEdit() : this.doAdd();
        }
      });
    },
    /* 添加部门 */
    async doAdd() {
      // 校验成功 8-2 调用api接口函数
      this.form.pid = this.pid; // 传过来pid
      const res = await addDepartments(this.form);
      // console.log(res, 5);
      if (res.success) {
        /* 关闭对话框 */
        this.cancel();
        /* 刷新页面 8-3 成功后需要刷新页面 */
        // this.getDepart();
        /* 子向父传值 */
        this.$emit("handleDia");
      }
    },
    /* 编辑部门 */
    async doEdit() {
      // console.log("doEdit");
      /*
      步骤分析：
      1-封装api接口函数
      2-调用
      3-成功后==关闭对话框
      */
      const res = await updateDepartments(this.form);
      if (res.success) {
        /* 关闭对话框 */
        this.cancel();
        /* 刷新页面 8-3 成功后需要刷新页面 */
        // this.getDepart();
        /* 子向父传值 */
        this.$emit("handleDia");
      }
    },
  },
};
</script>
<style lang="less" scoped></style>
